<template>
	<view >
		<view
			class="head-bg h-320" 
			:style="{
				'background': `url(${getImg('integralShop-bg')}) no-repeat`,
			}"
		>
			<head-nav
				bgColor="rgba(0,0,0,0)" 
				title="积分商城"
			>
			</head-nav>
			<view class="search-box padlr24 mar-t20">
				<u-search 
					placeholder="搜索您想兑换的"
					v-model="keyword"
					:showAction="false"
					bgColor="#fff"
				></u-search>
			</view>
			<view class="block-box mar-t20 padlr24 padtb32">
				<view class="filter-box flex pad-b12">
					<view 
						class="filter-li mar-r24 flex-center" 
						v-for="(item, index) in 3" 
						:key="index"
						:class="{'filter-li-on': index == selectFilter}"
					>
						服务
					</view>
				</view>
				<integralProductList></integralProductList>
			</view>
			
		</view>
	
		
	</view>
</template>

<script>
	import integralProductList from "./components/integralProductList.vue"
	export default {
		components: {
			integralProductList
		},
		data() {
			return {
				keyword: "",
				selectFilter: 0,
			}
		},
		onLoad() {
			
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.block-box {
		border-radius: 24rpx 24rpx 0 0;
		.filter-box {
			.filter-li {
				width: 144rpx;
				height: 64rpx;
				background: #FFF1F5;
				border-radius: 12rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FF7171;
			}
			.filter-li-on {
				background: #FF7171;
				color: #FFFFFF;
			}
		}
	}
	.head-bg {
		background-size: 100% 100% !important;
	}
</style>
<style>
	page {
		background: #fff;
	}
</style>
